<!DOCTYPE html>
<html>
	<head>
	    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <title>Hello, World</title>
	    <style type="text/css">
	        html{height:100%}
	        body{height:100%;margin:0px;padding:0px}
	        #container{height:100%}
	    </style>
	    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=GWKMwlzTUGmMqnKCp5rxq6nRsDmefBCW">
	    </script>
	</head>
	
	<body>
		<div id="container"></div>
		<div id='result'>根据起点和终点经纬度驾车导航路线</div>
		<script type="text/javascript">
		    //114.51189910433335, 36.58220995988854
		
		    // 展示地图
		    var map = new BMap.Map("container");
		    var point = new BMap.Point(114.51189910433335, 36.58220995988854);
		    map.centerAndZoom(point, 18);
		    map.enableScrollWheelZoom(true);
		    //添加标记点
		    var marker = new BMap.Marker(point);        // 创建标注
		    map.addOverlay(marker);
		
		    //地图单击事件
		    map.addEventListener("click",function(e){
		        //清除离线
		        map.clearOverlays();
		        //获取点击时的经纬度
		        let p2 = new BMap.Point( e.point.lng,e.point.lat);
		
		        //计算距离
		        var output = "从当前位置到点击的位置驾车需要";
		        var searchComplete = function (results){
		            if (transit.getStatus() != BMAP_STATUS_SUCCESS){
		                return ;
		            }
		            var plan = results.getPlan(0);
		            //获取分钟数
		            output += plan.getDuration(true) + "\n";                //获取时间
		            //获取总距离
		            output += "总路程为：" ;
		            output += plan.getDistance(true) + "\n";             //获取距离
		        }
		        //创建路线
		        var transit = new BMap.DrivingRoute(map, {
		            renderOptions: {map: map},
		            onSearchComplete: searchComplete,
		            onPolylinesSet: function(){
		                setTimeout(function(){alert(output)},"500");
		            }});
		        //生成驾驶路线
		        transit.search(p2, point);
		    })
		</script>
	</body>
</html>
